<script setup lang="ts">
//存储响应结果
import { computed, reactive, ref, watchEffect } from 'vue'
import { message } from 'ant-design-vue'
import { spaceUserAnalyzeUsingPost } from '@/api/analyzeController.ts'
import VChart from 'vue-echarts'
import 'echarts'

const spaceUserAnalyzeResponse = ref<API.SpaceUserAnalyzeResponse[]>([])
const data = reactive(['day', 'week', 'month'])
const pick = ref(data[0])
const userId = ref()

interface Props {
  //空间 ID
  spaceId: string
  //是否查询公共图库
  queryPublic: boolean
  //全空间分析
  queryAll: boolean
}

const props = withDefaults(defineProps<Props>(), {
  queryAll: false,
  queryPublic: false,
})

async function spaceUserAnalyze() {
  const resp = await spaceUserAnalyzeUsingPost({
    spaceId: props?.spaceId,
    queryPublic: props?.queryPublic,
    queryAll: props?.queryAll,
    //页面上选中的统计维度
    timeDimension: pick.value,
    userId: userId.value,
  })
  if (resp.data.code === 0 && resp.data.data) {
    spaceUserAnalyzeResponse.value = resp.data.data
  } else {
    message.error(resp.data.message)
  }
}

function doSearch(value: string) {
  userId.value = value
}

const options = computed(() => {
  return {
    xAxis: {
      type: 'category',
      data: spaceUserAnalyzeResponse.value.map((item) => item.period),
      axisLabel: {
        // 可根据需要调整文字旋转等样式，这里暂不设置
      },
    },
    yAxis: {
      type: 'value',
      name: '上传数量',
    },
    series: [
      {
        data: spaceUserAnalyzeResponse.value.map((item) => item.count),
        type: 'line',
        smooth: true, // 设置为平滑折线
        symbol: 'circle', // 标记点样式为圆形
        symbolSize: 8, // 标记点大小
        lineStyle: {
          width: 2, // 线宽
        },
      },
    ],
    tooltip: {
      trigger: 'axis',
    },
  }
})

watchEffect(() => {
  spaceUserAnalyze()
})
</script>

<template>
  <!--  用户上传行为分析，折线图-->
  <div id="spaceUserAnalyze">
    <a-card style="height: 320px" title="用户上传行为分析">
      <a-space style="width: 100%; display: flex; justify-content: flex-end">
        <a-segmented v-model:value="pick" :options="data" />
        <a-input-search
          @search="doSearch"
          enter-button="搜索用户"
          placeholder="请输入用户Id"
        ></a-input-search>
      </a-space>
      <v-chart :option="options" style="height: 300px" />
    </a-card>
  </div>
</template>

<style scoped></style>
